<template>
  <div class="center-container bg-slate-50">
    <VueDraggable
      ref="dragContainer"
      v-model="comList"
      :animation="150"
      group="editor"
      handle=".content.normal-class"
      class="w-full min-h-[300px] flex flex-col gap-2 relative"
      ghost-class="ghost-placeholder"
      drag-class="dragging-item"
      @dragenter.prevent="handleDragEnter"
      @dragleave.prevent="handleDragLeave"
      @add="onAdd"
    >
      <div
        class="absolute top-0 left-0 bottom-0 right-0 w-full h-full flex items-center justify-center text-gray-500"
        v-if="comList.length === 0"
      >
        <span>拖拽组件到这里</span>
      </div>
      <div
        v-for="(com, index) in coms"
        :key="com.id"
        :class="[
          'content',
          dynamicClassName(com.id),
          { selected: currentComId === com.id },
        ]"
        :data-component-name="
          com.status?.title?.name || com.type || `组件 ${index + 1}`
        "
        @click="handleComponentClick(com)"
      >
        <el-button
          class="absolute w-6 h-6 -top-3 -right-3"
          type="danger"
          size="small"
          circle
          v-if="
            currentComId === com.id &&
            dynamicClassName(com.id) !== 'static-class'
          "
          @click="handleDelete(com)"
        >
          <i-ep-close />
        </el-button>
        <component
          :is="com.type"
          :status="com.status"
          :serial-num="index - 1"
        />
      </div>
    </VueDraggable>
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from "@/stores/useEditor";
import { VueDraggable } from "vue-draggable-plus";
import { defaultJsonSchemaMap } from "@/configs/defaultStatus/defaultJsonSchemaMap";
import type { IJsonSchema } from "@/types/common";
import { preInitialStatus } from "@/utils/preSetting";
import type { IPreSettingComsUnions } from "@/types";
import { useDragJudge } from "@/utils/drag";

const editorStore = useEditorStore();
const { coms, currentComId } = storeToRefs(editorStore);

// - 拖拽列表
const comList = ref(coms);
// - 拖拽容器
const dragContainer = useTemplateRef<HTMLElement>("dragContainer");

// * 删除组件
const handleDelete = (com: IJsonSchema) => {
  editorStore.deleteComByComId(com.id);
};

// * 动态类名
// ? "static-class"为固定的组件，不可被删除，不可被拖拽
const dynamicClassName = (id: string) => {
  const staticItem = ["static-default-title", "static-default-desc"];

  return staticItem.includes(id) ? "static-class" : "normal-class";
};

// - 跟踪是否真的在拖拽区域内
const dragJudge = useDragJudge(dragContainer);
const { handleDragEnter, handleDragLeave } = dragJudge;

// * 处理组件点击事件
const handleComponentClick = (com: IJsonSchema) => {
  editorStore.setCurrentComId(com.id);
};

// * 拖拽添加事件
const onAdd = (evt: any) => {
  // console.log("onAdd", isInDropZone.value, evt);
  if (dragJudge.isInDropZone.value) {
    console.log("onAdd", evt);
    // * 获取当前选中的业务组件的名称
    const surveyName = evt.data
      .materialName as keyof typeof defaultJsonSchemaMap;
    // * 获取当前组件的索引
    const surveyIndex = evt.newDraggableIndex;
    // * 创建业务组件对应的Json Schema
    const surveyStatus = defaultJsonSchemaMap[surveyName]();
    // * 设置当前组件的初始状态
    preInitialStatus(surveyStatus, surveyName as IPreSettingComsUnions);
    // * 将当前组件加入编辑器画布中
    editorStore.insertCom(surveyStatus, surveyIndex);
  }
};
</script>

<style scoped lang="scss">
.center-container {
  height: fit-content;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  border: 1px solid var(--x-border-color);
  border-radius: var(--x-border-radius-md);
  padding: 20px;
  background: var(--x-white);

  .content {
    cursor: move;
    width: auto;
    padding: 10px;
    background-color: var(--x-white);
    border-radius: var(--x-border-radius-sm);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    outline: none;

    // 移除浏览器默认的焦点样式
    &:focus {
      outline: none !important;
    }

    // 移除浏览器默认的焦点可见样式
    &:focus-visible {
      outline: none !important;
    }

    // 确保鼠标按下时不会有默认样式
    &:active {
      outline: none !important;
    }

    &:hover {
      transform: scale(1.015);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    // 选中状态样式
    &.selected {
      border: 2px solid #3b82f6;
      border-radius: 8px;
      transform: scale(1.015);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
  }
}

// 拖拽占位样式
:deep(.ghost-placeholder) {
  display: flex;
  position: relative;

  // 在占位符上方显示简单的蓝色横线
  &::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 3px;
  }
}

// 拖拽时的轻量级样式 - 避免干扰拖拽功能
:deep(.sortable-drag) {
  opacity: 0.8;
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

// 被选中时的样式 - 移除outline，使用更简洁的样式
:deep(.sortable-chosen) {
  border-radius: var(--x-border-radius-sm);
  opacity: 0.8;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease !important;
}

// 全局禁用所有 content 元素的 outline 过渡
:deep(.content) {
  outline-color: transparent !important;
  outline-width: 0 !important;

  &:focus,
  &:focus-visible,
  &:active {
    outline-color: transparent !important;
    outline-width: 0 !important;
  }
}

.active {
  transform: scale(1.01);
  transition: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.delete-btn {
  right: -5px;
  top: -10px;
}
</style>
